<script setup lang="jsx">
import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import AddModal from "@cps/actions/addModal.vue";
import delivery from '@/api/warehouse/delivery'
import { Message, Modal } from '@arco-design/web-vue'
const columnsDist = inject('columnsDist')
// form 组件的 ref
const crudForm = ref()
const addModalRef = ref()
const crudFormShow=ref(false)
const title=ref('新增')
// 表单数据
const form = ref({id:'',type:'1',clearance:0,declaration:0,})
const visible = ref(false)
  const onShow = async (value) => {
    crudForm.value.resetForm();
      visible.value = true
    if(value){
      console.log('value',value)
      form.value=JSON.parse(JSON.stringify(value))
      if(form.value.to_depot_id){
        form.value.to_depot_id=form.value.to_depot_id.toString()
      }
      if(form.value.type){
        form.value.type=form.value.type.toString()
      }
      if(form.value.supplier_service_id){
        form.value.supplier_service_id=form.value.supplier_service_id.toString()
      }
    }
    if(form.value.id==''){
      title.value='新增'
    }else{
      if(form.value.turn){
        title.value='转运'
      }else{
        title.value='编辑'
      }
    }
   
  }
  const options = ref({
    showButtons:false,
  })
  const columns=  ref(
    [
  {
   
        formType: 'grid-tailwind',
        colNumber: 2,      
        cols: [
          {
            formList: [             
            {
              title: "发往站点",
              dataIndex: "to_depot_id",
              formType: "select", 
              dict: {
                data:columnsDist.value.dicthelpApi_depot.data,
                props: {label: 'name', value: 'id'}, translation: true,
              },
              rules: {
                required: true,
                message: "请选择发往站点"
              },
              
              
            },
            {
              title: "类型",
              dataIndex: "type",
              formType: "select", 
              dict: {
                data:[
                  {label: "大货",value: "1"},
                  {label: "包裹",value: "2"}
                ],
                translation: true
              },
              rules: {
                required: true,
                message: "请选择类型"
              },
              // onControl: (val, maFormObject) => {
              //     if (form.value.id != '' && form.value.turn) {
              //           return{                
              //             to_depot_id: {disabled:true},   
              //           }
              //       }else{
              //         return{                
              //             to_depot_id: {disabled:false},   
              //           }
              //       }
              //   }
              
            },
            {
              title: "供应商服务",
              dataIndex: "supplier_service_id",
              formType: "select", 
              virtualListProps:{},
              dict: {
                data:columnsDist.value.dicthelpApi_supplier.data,
                props: {label: 'name', value: 'id'}, translation: true,
              },                          
            },
            {
              dataIndex: 'reference', title: '参考号',formType: "textarea",
            },   
          ]
          },
          {
            formList: [
           {
              dataIndex: 'name', title: '主品名',
            },
            {
              dataIndex: 'clearance', title: '单独清关',formType: "switch",
              checkedValue: 1,
              uncheckedValue: 0,
            },
            {
              dataIndex: 'declaration', title: '出口报关',formType: "switch",
              checkedValue: 1,
              uncheckedValue: 0,
            },
            {
              title: "标识",
              dataIndex: "tags",
              formType: "checkbox", 
              dict: {
                data:columnsDist.value.dicthelpApi_tagsType.data,
                props: {label: 'name', value: 'id'}, translation: true,
              },                          
            },                
            {
              dataIndex: 'distribut_mark', title: '分货备注',
            },
            {
              dataIndex: 'remark', title: '备注',formType: "textarea",
            },          
          ]
          },         
        ]
      },
    ]
  )
const emits = defineEmits(['addClick','emitClick'])
const formLoading=ref(false)
  //新增 //编辑
  const handleBeforeOk =async () => {
    if (await crudForm.value.validateForm()) {
      return false
    }
    console.log('form',form)
    formLoading.value=true
          if(form.value.id==''){
            delivery.save(form.value).then(res => {
              if(res.success){
                Message.success(res.message || `新增成功！`);
              emits('addClick');
              close()
              }else{
                Message.warning(res.message)

              }
              
            }).finally(()=>{
              formLoading.value=false
            })
          }else{
            delivery.update(form.value).then(res => {
              if(res.success){
                if(form.value.turn){
                  Message.success(res.message || `转运成功！`)    
                  emits('addClick');
                }else{
                  Message.success(res.message || `编辑成功！`)    
                  emits('emitClick');
                }
               
              close()
              }else{
                Message.warning(res.message)

              }
            }).finally(()=>{
              formLoading.value=false
            })
          }
      
    };
    const close = () => {
      visible.value = false
      form.value = {id:'',type:'1',clearance:0,declaration:0,}
    }
const onBeforeCancel=()=>{
  Modal.confirm({
        title: '确认关闭?',
        onOk: () => {
          close()
        },
      });
}
nextTick(() => {
    crudFormShow.value=true
})
defineExpose({ onShow })
</script>

<template>
  <a-drawer v-model:visible="visible" width="80%" :onBeforeCancel="onBeforeCancel">
    <template #title>{{title}}</template>
    <ma-form  v-model="form" ref="crudForm" :options="options" :columns="columns">
      </ma-form>
      <template #footer>        
          <a-button @click="onBeforeCancel">关闭</a-button>
          <a-button type="primary" :disabled="formLoading" @click="handleBeforeOk(crudForm)">
            保存
          </a-button>
        </template>
        <add-modal ref="addModalRef"></add-modal>
  </a-drawer>
</template>